<script setup>
import { ref, reactive } from 'vue'

const formInline = reactive({
    type: '',
    keyword: '',
    date: '',
    action: '',
    read: [],
})
const onSubmit = () => {
  console.log('submit!')
}
const tableData = ref([
{
        title: '域名还有60天到期',
        type: '域名过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },{
        title: '域名注册成功',
        type: '域名过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },{
        title: '域名注册成功',
        type: '域名过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },{
        title: '域名转入成功',
        type: '域��过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },{
        title: '域名还有60天到期',
        type: '域名过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },{
        title: '域名PUSH待接收',
        type: '域名过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },{
        title: '域名还有60天到期',
        type: '域名过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },{
        title: '域名PUSH待接收',
        type: '域名过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },{
        title: '域名得标',
        type: '域名过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },{
        title: '尾款未支付',
        type: '域名过期',
        content: '尊敬的serialNumber：您的域名【domainName】共count个域名，还有60天过期。过期3天后域名将被删除，为避免影响您的使用，请尽快续费！如您确认不再需要此域名，请及时注销、变更ICP备案及公安备案。',
        time: '2024-12-06 15:18:54',

    },
])

const rowClassName = (row, index) => {
    console.log(row,'ssdsdsdssd')
    if (row.rowIndex === 0 || row.rowIndex === 2 || row.rowIndex === 5) {
        return 'red-row';
    }
    return '111';
}
</script>
<template>
    <div class="bs-panel">
        <div class="bs-panel-body">
            <div class="page-title bold">站内信</div>
            <div class="message-body">
                <div class="filter-cell">
                    <el-form :inline="true" :model="formInline" class="form-inline">
                        <el-form-item >
                            <el-select
                            v-model="formInline.type"
                            style="width: 120px;"
                            placeholder="请选择"
                            >
                                <el-option label="全部类型" value="1" />
                                <el-option label="域名过期" value="2" />
                                <el-option label="域名注册" value="3" />
                                <el-option label="域名续费" value="4" />
                                <el-option label="域名转入" value="5" />
                                <el-option label="域名转出" value="6" />
                                <el-option label="域名PUSH" value="7" />
                                <el-option label="域名预定" value="8" />
                                <el-option label="域名竞价" value="9" />
                                <el-option label="余额提现" value="10" />
                                <el-option label="其他" value="11" />
                            </el-select>
                        </el-form-item>
                        <el-form-item >
                            <el-date-picker
                            v-model="formInline.date"
                            type="daterange"
                            style="width: 300px;"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            />
                        </el-form-item>
                        <el-form-item >
                            <el-input v-model="formInline.keyword" placeholder="查找关键词" clearable />
                        </el-form-item>
                        <el-form-item >
                            <el-button type="primary">搜索</el-button>
                        </el-form-item>
                        <el-form-item >
                            <el-icon size="20" color="#666"><Refresh /></el-icon>
                        </el-form-item>
                        <el-form-item >
                            <el-checkbox-group v-model="formInline.read">
                                <el-checkbox value="1" name="a">
                                    只看未读
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        
                    </el-form>
                    <div class="filter-box">
                        <div class="filter-item">
                            搜索结果共120条，已选择1条
                        </div>
                        <el-select
                            v-model="formInline.action"
                            style="width: 100px;"
                            placeholder="请选择"
                            >
                            <el-option label="选择操作" value="1" />
                            <el-option label="选中已读" value="2" />
                            <el-option label="全部已读" value="3" />
                            <el-option label="选中删除" value="4" />
                            <el-option label="全部删除" value="5" />
                        </el-select>
                        <div class="filter-item">
                            <el-button >批量操作</el-button>
                        </div>
                    </div>
                </div>
                <el-table :data="tableData" :row-class-name="rowClassName" style="width: 100%">
                    <el-table-column type="selection" width="45" />
                    <el-table-column prop="title" label="标题" width="160" />
                    <el-table-column prop="type" label="类型" width="100" />
                    <el-table-column prop="content" label="内容" width="440" show-overflow-tooltip/>
                    <el-table-column prop="time" label="时间"  />
                    <el-table-column label="操作" width="80" >
                        <template #default="scope">
                            <el-link type="primary" size="small">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bs-panel-footer">
                    <el-pagination background layout="prev, pager, next" :total="1000" />
                </div>
            </div>
        </div>
    </div>
    
</template>
<style scoped lang='scss'>
    .message-body{
        padding:10px 25px;
    }
    .bs-panel-body{
        padding: 25px;
    }
    .form-footer,
    .form-top{
        height: 32px;
        text-align: right;
    }
    .bs-panel-footer{
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
    .filter-cell{
        margin-bottom: 15px;
    }
    .filter-box{
        display: flex;
        align-items: center
    }
    .filter-box .el-select{
        margin: 0 10px;
    }
    .filter-cell ::v-deep .el-form-item{
        margin-right: 12px;
    }

</style>